<script setup>
import { h, onMounted, ref, resolveDirective, withDirectives } from 'vue'

import {
  useMessage,
  NButton,
  NForm,
  NFormItem,
  NInput,
  NInputNumber,
  NPopconfirm,
  NTreeSelect,
  NTag,
  NSwitch,
  NFlex,
  NAvatar,
  NSelect,
  NImage,
  NDataTable,
} from 'naive-ui'

import CommonPage from '@/components/page/CommonPage.vue'
import QueryBarItem from '@/components/query-bar/QueryBarItem.vue'
import CrudModal from '@/components/table/CrudModal.vue'
import CrudTable from '@/components/table/CrudTable.vue'
import TheIcon from '@/components/icon/TheIcon.vue'
import { getToken } from '@/utils'
import { renderIcon } from '@/utils'
import { useCRUD } from '@/composables'
// import { loginTypeMap, loginTypeOptions } from '@/constant/data'
import api from '@/api'
import { router } from '@/router'
import default_image from '@/assets/images/mz.jpg'

defineOptions({ name: '订单管理' })

const $table = ref(null)
const queryItems = ref({})
const vPermission = resolveDirective('permission')
const base_path = import.meta.env.VITE_BASE

const {
  modalVisible,
  modalTitle,
  modalLoading,
  handleSave,
  modalForm,
  modalFormRef,
  handleEdit,
  handleDelete,
  handleAdd,
} = useCRUD({
  name: '订单',
  initForm: {},
  doCreate: api.createOrdersList,
  doUpdate: api.updateOrdersList,
  doDelete: api.deleteOrdersList,
  refresh: () => $table.value?.handlerefresh(),
})
const isDisabled = ref(false)
const data = reactive({
  attributeOption: [
    {
      id: 1,
      name: '描述模板',
    },
    {
      id: 2,
      name: '规格模板',
    },
  ],
  state_option:[],
  uploadAction: base_path + 'api/goods/brand/file',
  token: getToken(),
  onLevelData:[]
})


onMounted(() => {
  api.getOrdersType().then((res) => (data.state_option = res.data))
  $table.value?.handleSearch()
})

const columns = [
  {
    title: '+',
    width: 100,
    key: 'goods',
    align: 'center',
    type: 'expand',
    expandable: row => row.goods !== null,
    renderExpand: (row) => {
      let goods = row.goods ?? []
      let goods_columns=[
        {
          width:"60",
          title: 'ID',
          key: 'id'
        },
        {
          width:"auto",
          title: '规格',
          key: 'sku_name'
        },
        {
          width:"80",
          title: '数量',
          key: 'num'
        },{
          width:"80",
          title: '单价',
          key: 'price'
        },{
          width:"80",
          title: '物流状态',
          key: 'express_name'
        },{
          width:"120",
          title: '物流公司',
          key: 'express_company'
        },{
          width:"200",
          title: '物流单号',
          key: 'express_no'
        }
      ]
      return h(NDataTable, { columns: goods_columns,striped:true ,size:"small",data:goods, style: { width: '1000px',margin:'10px 10px' }  })
    }
  },
  {
    title: 'ID',
    key: 'id',
    width: 60,
    align: 'center',
    ellipsis: { tooltip: true },
  },
  {
    title: '流水号',
    key: 'water_no',
    width: 100,
    align: 'center',
    ellipsis: { tooltip: true },
  },

  {
    title: '下单人',
    key: 'user_name',
    width: 100,
    align: 'center',
    ellipsis: { tooltip: true },
    fixed: 'left',
  },
  {
    title: '订单总额',
    key: 'price',
    width: 60,
    align: 'center',
    ellipsis: { tooltip: true },
  },
  {
    title: '抵扣金额',
    key: 'sale_price',
    width: 60,
    align: 'center',
    ellipsis: { tooltip: true },
  },

  {
    title: '订单状态',
    key: 'status_name',
    align: 'center',
    width:100,
    ellipsis: { tooltip: true },
    render(row) {
      return h(
          NTag,
          { type: 'primary', size: 'small', bordered: false, style: { margin: '2px 3px' } },
          { default: () => row.status_name }
      )
    },
  },

  {
    title: '付款时间',
    key: 'pay_time',
    width: '100',
    align: 'center',
    ellipsis: { tooltip: true },
  },

]


</script>

<template>
  <!-- 业务页面 -->
<AppPage :show-footer="false">
 <n-grid  x-gap="12" :cols="6">
    <n-gi span="2">
          <n-card title="直播测试-带货总数据" :segmented="{ content: true,footer: 'soft',}" class="mb-10 mt-10 " hover:card-shadow  size="small">
          <template #header-extra>
            <n-button size="small" style="height: 25px" type="primary">刷新</n-button>
          </template>
            <n-grid  x-gap="12" :cols="3">
              <n-gi><n-card title="总金额" embedded >¥<n-number-animation :from="0" :to="1000000" /><span class="small_span">/元</span></n-card></n-gi>
              <n-gi><n-card title="总数量" embedded ><n-number-animation :from="0" :to="5000" /><span class="small_span">/张</span></n-card></n-gi>
              <n-gi><n-card title="总人数" embedded ><n-number-animation :from="0" :to="3500" /><span class="small_span">/人</span></n-card></n-gi>
            </n-grid>
        </n-card>

      <n-card content-style="padding: 0;" hover:card-shadow  size="small">
        <n-tabs
          type="line"
          size="large"
          :tabs-padding="20"
          pane-style="padding: 20px;"
        >
          <n-tab-pane name="KOSSME蔻诗弥">
            <n-grid  x-gap="12" :cols="2">
              <n-gi class="item"><n-card title="线上金额" embedded >¥<n-number-animation :from="0" :to="800000" /><span class="small_span">/元</span></n-card></n-gi>
              <n-gi class="item"><n-card title="线上数量" embedded ><n-number-animation :from="0" :to="4000" /><span class="small_span">/张</span></n-card></n-gi>
              <n-gi class="item"><n-card title="线下金额" embedded >¥<n-number-animation :from="0" :to="100000" /><span class="small_span">/元</span></n-card></n-gi>
              <n-gi class="item"><n-card title="线下数量" embedded ><n-number-animation :from="0" :to="800" /><span class="small_span">/张</span></n-card></n-gi>
              <n-gi class="item"><n-card title="购物车金额" embedded >¥<n-number-animation :from="0" :to="100000" /><span class="small_span">/元</span></n-card></n-gi>
              <n-gi class="item"><n-card title="购物车数量" embedded ><n-number-animation :from="0" :to="800" /><span class="small_span">/张</span></n-card></n-gi>
            </n-grid>
          </n-tab-pane>
          <n-tab-pane name="无线除螨仪C1">
            <n-grid  x-gap="12" :cols="2">
              <n-gi class="item"><n-card title="线上金额" embedded >¥<n-number-animation :from="0" :to="800000" /><span class="small_span">/元</span></n-card></n-gi>
              <n-gi class="item"><n-card title="线上数量" embedded ><n-number-animation :from="0" :to="4000" /><span class="small_span">/张</span></n-card></n-gi>
              <n-gi class="item"><n-card title="线下金额" embedded >¥<n-number-animation :from="0" :to="100000" /><span class="small_span">/元</span></n-card></n-gi>
              <n-gi class="item"><n-card title="线下数量" embedded ><n-number-animation :from="0" :to="800" /><span class="small_span">/张</span></n-card></n-gi>
              <n-gi class="item"><n-card title="购物车金额" embedded >¥<n-number-animation :from="0" :to="100000" /><span class="small_span">/元</span></n-card></n-gi>
              <n-gi class="item"><n-card title="购物车数量" embedded ><n-number-animation :from="0" :to="800" /><span class="small_span">/张</span></n-card></n-gi>
            </n-grid>
          </n-tab-pane>
        </n-tabs>
      </n-card>
    </n-gi>

    <n-gi span="4">
      <n-card title="订单详情" :segmented="{ content: true,footer: 'soft',}" class="mb-10 mt-10 " hover:card-shadow  size="small">
      <CrudTable
        ref="$table"
        :columns="columns"
        :get-data="api.getOrdersList"
        :scroll-x="1000"
    > </CrudTable>
      </n-card>
    </n-gi>



  </n-grid>
</AppPage>



</template>
<style>
   .item{
     margin-bottom: 10px
   }
   .small_span{
     font-size: 10px;
     color:#ccc;
   }
</style>
